<template>
  <el-row :gutter="20">
    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">左侧占位</el-col>
    <el-col :xs="24" :sm="20">
      <el-card style="background-color: rgba(255,255,255,0.9)" class="tags-card">
        <div slot="header" class="total">
          <div class="titleIndex">
            <i class="el-icon-price-tag"></i>
            <span>全部标签</span>
          </div>
        </div>
        <div class="tags-container">
          <div class="tag-cloud">
            <span 
              v-for="tag in tagList" 
              :key="tag.id" 
              :class="['tag-item', `tag-size-${tag.size}`]"
              @click="goToTag(tag.id)"
            >
              {{ tag.name }}
              <span class="tag-count">({{ tag.blogCount }})</span>
            </span>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">右侧占位</el-col>
  </el-row>
</template>

<script>
export default {
  name: 'Tags',
  data() {
    return {
      tagList: [
        { id: 1, name: 'Vue', blogCount: 45, size: 3 },
        { id: 2, name: 'JavaScript', blogCount: 38, size: 3 },
        { id: 3, name: 'React', blogCount: 32, size: 2 },
        { id: 4, name: 'Java', blogCount: 28, size: 2 },
        { id: 5, name: 'Spring', blogCount: 25, size: 2 },
        { id: 6, name: '算法', blogCount: 42, size: 3 },
        { id: 7, name: '数据结构', blogCount: 30, size: 2 },
        { id: 8, name: '前端', blogCount: 50, size: 3 },
        { id: 9, name: '后端', blogCount: 35, size: 2 },
        { id: 10, name: '数据库', blogCount: 22, size: 1 },
        { id: 11, name: 'Git', blogCount: 18, size: 1 },
        { id: 12, name: 'Docker', blogCount: 15, size: 1 },
        { id: 13, name: 'Linux', blogCount: 20, size: 1 },
        { id: 14, name: 'Node.js', blogCount: 26, size: 2 },
        { id: 15, name: 'TypeScript', blogCount: 24, size: 2 },
        { id: 16, name: 'CSS', blogCount: 19, size: 1 },
        { id: 17, name: 'HTML', blogCount: 16, size: 1 },
        { id: 18, name: 'Webpack', blogCount: 14, size: 1 },
        { id: 19, name: 'Vite', blogCount: 12, size: 1 },
        { id: 20, name: 'Python', blogCount: 21, size: 1 }
      ]
    }
  },
  methods: {
    goToTag(id) {
      this.$router.push({
        path: '/',
        query: { tagId: id }
      })
    }
  }
}
</script>

<style scoped>
.tags-card {
  margin-top: 20px;
}

.titleIndex {
  display: flex;
  align-items: center;
  font-size: larger;
  font-weight: bold;
}

.titleIndex i {
  margin-right: 10px;
  color: #409eff;
  font-size: 20px;
}

.tags-container {
  padding: 30px 20px;
  min-height: 400px;
}

.tag-cloud {
  text-align: center;
  line-height: 2.5;
}

.tag-item {
  display: inline-block;
  margin: 8px 12px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.tag-item:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

.tag-count {
  opacity: 0.8;
  font-size: 0.9em;
  margin-left: 4px;
}

.tag-size-1 {
  font-size: 14px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.tag-size-2 {
  font-size: 16px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.tag-size-3 {
  font-size: 18px;
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

@media screen and (max-width: 768px) {
  .tags-container {
    padding: 20px 10px;
  }
  
  .tag-item {
    margin: 5px 8px;
    padding: 6px 12px;
  }
  
  .tag-size-1 {
    font-size: 12px;
  }
  
  .tag-size-2 {
    font-size: 14px;
  }
  
  .tag-size-3 {
    font-size: 16px;
  }
}
</style>

